<template>
	<view class="end_list">
		<view class="item" v-for="item in data_list">
			<image src="@/static/images/end.png" class="end_img"></image>
			<view class="item_view">
				<image :src="item.product.img" class="img"></image>
				<view class="item_cell">
					<view class="name">{{item.product.name}}</view>
					<view class="price">
						<view class="key">￥</view>
						<view class="value">{{item.product.price}}</view>
					</view>
					<view class="time">
						<image src="@/static/images/sj.png" class="img"></image>
						<text>认购时间：{{item.created_at}}</text>
					</view>
					<!-- <view class="time">
						<image src="@/static/images/sj.png" class="img"></image>
						<text>完成时间：2024.12.12 15:00:00</text>
					</view> -->
				</view>
			</view>
			<view class="item_foot">
				<view class="cell">
					<view class="key">总增益：</view>
					<view class="value">{{item.gain_all}}瓶</view>
				</view>
				<view class="cell">
					<view class="key">已增益：</view>
					<view class="value">{{item.gain_has}}瓶</view>
				</view>
				<view class="cell">
					<view class="key">待增益：</view>
					<view class="value">{{item.gain_wait}}瓶</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		underwriteCupboard
	} from "@/request/api";
	import {
		ref
	} from "vue";
	const emit = defineEmits(["value"]);
	const props = defineProps({
		type: [String, Number]
	});
	
	const data_list = ref([]);
	const getList = async () => {
		let {
			list,
			all_number
		} = await underwriteCupboard({
			status: props.type
		});
		data_list.value = list;
		emit("value", all_number)
	};
	getList();
</script>

<style scoped lang="scss">
	.end_list {
		padding: 0 25rpx;
		box-sizing: border-box;

		.item {
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			position: relative;

			.end_img {
				width: 134rpx;
				height: 134rpx;
				position: absolute;
				right: 47rpx;
				bottom: 24rpx;
				z-index: 2;
			}

			.item_view {
				display: flex;
				padding-top: 20rpx;
				box-sizing: border-box;

				.img {
					width: 160rpx;
					height: 160rpx;
				}

				.item_cell {
					flex: 1;
					min-height: 240rpx;
					padding: 12rpx 0 12rpx 22rpx;
					box-sizing: border-box;

					.name {
						line-height: 36rpx;
						color: #333333;
						font-size: 26rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.price {
						color: #CA1C1D;
						padding-top: 18rpx;
						padding-bottom: 32rpx;
						box-sizing: border-box;
						display: flex;
						align-items: flex-end;

						.key {
							font-size: 28rpx;
							font-weight: bold;
						}

						.value {
							font-size: 40rpx;
						}
					}

					.time {
						padding-bottom: 20rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;

						image {
							width: 24rpx;
							height: 24rpx;
						}

						text {
							color: #666666;
							font-size: 24rpx;
							padding-left: 6rpx;
							box-sizing: border-box;
						}
					}
				}
			}

			.item_foot {
				height: 92rpx;
				border-top: 1px solid #EEEEEE;
				display: flex;
				align-items: center;

				.cell {
					flex: 1;
					display: flex;
					justify-content: center;

					&:nth-child(2) {
						border-left: 1rpx solid #EEEEEE;
						border-right: 1rpx solid #EEEEEE;

						.value {
							color: #76AC46;
						}
					}

					&:nth-child(3) {
						.value {
							color: #CA1C1D;
						}
					}

					.key {
						color: #666666;
						font-size: 24rpx;
					}

					.value {
						color: #333333;
						font-size: 24rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>